<template>
  <div style="padding: 10px">
    <t-row :gutter="12">
      <t-col :span="6">
        <t-card title="物料分组">
          <template #actions>
            <t-button @click="clickUpload">
              <template #icon>
                <t-icon name="arrow-up" :style="{ cursor: 'pointer' }" />
              </template>
              上传excel</t-button>

            <t-button  theme="primary" @click="clickAdd">
              +添加
              </t-button>
            <t-button @click="loadMaterGroup">
              <template #icon>
                <t-icon name="refresh" :style="{ cursor: 'pointer' }" />
              </template>
              刷新</t-button>
            <t-popconfirm content="确认删除吗" @confirm="clickDelGroup">
               <t-button theme="danger">
                <template #icon>
                  <t-icon name="delete" :style="{ cursor: 'pointer' }" />
                </template>
                删除</t-button>
            </t-popconfirm>
          </template>

          <div style="width: 100%;">
            <!-- <div style="text-align: end">
              <t-icon name="refresh" style="cursor: pointer" @click="loadMaterGroup" />
            </div> -->

            <t-tree :data="materGroupList" :expand-on-click-node="true" :active-multiple="false" activable hover
              transition expand-on-click-node  :on-active="onGroupActive" />
          </div>
        </t-card>
      </t-col>
      <t-col :span="6">
      
       <!-- <div>
        <t-button>模板</t-button>
        <t-upload :action="apiUrl + 'materGroup/uploadMaterialGroup'" :fileListDisplay="fileListDisplay" theme="file-flow" :max="1"
        :format-response="formatResponse">
        <t-button>上传</t-button></t-upload>
       </div> -->
      </t-col>
    </t-row>

    <GroupAddDialog  ref="groupAddDialogRef" :parentId="selectGroupId" @onSaved="loadMaterGroup"/>
    <uploadDialog ref="uploadRef"  :dl-url="apiUrl + '分组引入模板.xlsx'"
    :upload-url="apiUrl + 'materGroup/uploadMaterialGroup'"  @upload-success="loadMaterGroup"
    />

  </div>
</template>

<script>
  import { ref, reactive, computed, onMounted } from 'vue';
  import { MessagePlugin } from 'tdesign-vue-next';
  import { queryMaterialGroupList,delMaterialGroup  } from '@/service/material';
  import {filePrefix, API_URL } from '@/common/constants';
  import { DeleteIcon, AddIcon } from 'tdesign-icons-vue-next';
  import router from '@/router';
  import GroupAddDialog from './components/groupAddDialog.vue'
  import uploadDialog from '@/components/uploadDialog/index.vue';

  export default {
    components: {GroupAddDialog,uploadDialog},
    setup(props) {
      const formData = reactive({ FMATERIALID: '' });
      // const formData = reactive({ FMATERIALID: 111204, FDocumentStatus: '', FName: '伺服电机' })
      const loading = ref(false);
      const selectGroupId = ref()
      const materGroupList = ref([]);
      const fileListDisplay = ref([])
      const expanded = ref([])
      const groupAddDialogRef = ref()
      const apiUrl = API_URL;
      const uploadRef = ref();

      const cardOptions = [
        {
          content: '刷新',
          value: 1,
        },
        {
          content: '导入',
          value: 2,
        },
      ];



      const loadMaterGroup = async () => {
        materGroupList.value = [];
        const res = await queryMaterialGroupList({});
        if (res) {
          // materGroupList.value = res.dataList.map(item=>{
          //   return {value:item.value,label:item.label+"("+item.value+")"}
          // });

          materGroupList.value = res.dataList
          console.log('loadMaterGroup', materGroupList.value);
        }
      };

      const clickAdd = () => {
        if(!selectGroupId.value){
          MessagePlugin.error('未选择父分组！');
          return
        }

        // router.push({ name: 'materialAdd' });
        groupAddDialogRef.value.openGroupDialog()
      };

      const clickUpload = () => {
      uploadRef.value.openExcelDialog();
    };

      const formatResponse = (e) => {
        console.log('formatResponse', e);
        if (e.success) {
          loadMaterGroup()
          MessagePlugin.success('上传成功！');
        } else {
          MessagePlugin.error(e.msg);
        }
        fileListDisplay.value = []
      };

      const clickDelGroup = async () => {
        console.log('111,',selectGroupId.value);
        if(!selectGroupId.value){
          MessagePlugin.error('未选择节点！');
          return
        }
        const res = await delMaterialGroup(selectGroupId.value)
        if (res.success) {
          loadMaterGroup();
          MessagePlugin.success('删除成功！');
        } else {
          MessagePlugin.error(res.msg || '删除失败！');
        }
      }

      const onGroupActive = (val)=>{
        selectGroupId.value = val[0]
      }


      onMounted(() => {
        loadMaterGroup();
      });

      const clickHandler = (data) => {
        if (data.content === '刷新') {
          loadMaterGroup();
        }
      };

      return {
        formData,
        loading,
        clickAdd,
        materGroupList,
        loadMaterGroup,
        cardOptions,
        clickHandler,
        apiUrl,
        formatResponse,
        DeleteIcon,
        AddIcon,
        selectGroupId,
        onGroupActive,
        clickDelGroup,
        fileListDisplay,
        expanded,
        groupAddDialogRef,
        uploadRef,
        filePrefix,
        clickUpload
      };
    },
  };
</script>

<style scoped>
  >>> .t-tree .t-is-active{
   background-color:dodgerblue;
   color: white;
  }


</style>